<div class="breadcrumbs ace-save-state" id="breadcrumbs">
	<ul class="breadcrumb">
		<li>
			<i class="ace-icon fa fa-list"></i>
			<a href="javascript:void(0)">权限设置</a>
		</li>
		<li class="active">用户组</li>
	</ul><!-- /.breadcrumb -->

	<div class="nav-search" id="nav-search">
		<form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off"/>
                <i class="ace-icon fa fa-search nav-search-icon"></i>
            </span>
		</form>
	</div><!-- /.nav-search -->
</div>

<div class="page-content">

	<div class="row">
		<div class="col-xs-12">
			<!-- PAGE CONTENT BEGINS -->
			<table id="grid-table"></table>
			<div id="grid-pager"></div>
			<!-- PAGE CONTENT ENDS -->
		</div><!-- /.col -->
	</div><!-- /.row -->

</div><!-- /.page-content -->


<script type="text/javascript">

	var g_roles = {{ roles|safe }};
	user_page_init();

	function user_page_init() {
		var grid_selector = "#grid-table";
		var pager_selector = "#grid-pager";

		// 初始化
		var grid_config ={{ grid_config|safe }};

		function style_edit_form_field(form) {
			//JqGridHelp.setFormFieldAsDatePicker(form,date_joined)
			JqGridHelp.setFormFieldAsSwitch(form, "is_superuser");
			JqGridHelp.setFormFieldAsSwitch(form, "is_staff");
			JqGridHelp.setFormFieldAsSwitch(form, "is_active");
		}

		function formatStaff(cellValue, options, rowObject, state) {
			console.log(cellValue,options,rowObject,state);
			if (cellValue == 0 || cellValue =='离职') {
				return "离职";
			}
			return "在职";
		}

		function formatActive(cellValue, options, rowObject, state) {
			if (cellValue == 0 || cellValue =='禁用') {
				return "禁用";
			}
			return "可用";
		}

		function formatRole(cellValue, options, rowObject, state) {
			for (var i = 0; i < g_roles.length; i++) {
				if (g_roles[i].id == cellValue) {
					return g_roles[i].name;
				}
			}
			return cellValue;
		}

		var roleEditValue = "";
		for (var i = 0; i < g_roles.length; i++) {
			if (i > 0) {
				roleEditValue += ";"
			}
			roleEditValue += g_roles[i].id + ":" + g_roles[i].name;
		}

		JqGridHelp.updateColModel(grid_config, "is_staff", {edittype: "select", editoptions: {value: "0:离职;1:在职"}, formatter: formatStaff}); // unformat: formatStaff
		JqGridHelp.updateColModel(grid_config, "is_active", {edittype: "select", editoptions: {value: "0:禁用;1:可用"}, formatter: formatActive});
		JqGridHelp.updateColModel(grid_config, "role_id", {edittype: "select", editoptions: {value: roleEditValue}, formatter: formatRole});

		var jqGridHelp = JqGridHelp.createNew(grid_selector, pager_selector, grid_config, style_edit_form_field, {edit: true, add: true, del: true, search: true, refresh: true, view: true});

	}

</script>